<template>
  <view class="page">
    <view class="header">
      <text class="title">{{ detail.title }}</text>
      <view class="meta-row">
        <text class="tag">{{ mapType(detail.type) }}</text>
        <text class="time">{{ fmt(detail.publish_time || detail.publishTime) }}</text>
        <text class="views">浏览 {{ detail.view_count || detail.viewCount || 0 }}</text>
      </view>
    </view>

    <view class="content" v-html="detail.content"></view>

    <custom-tabbar :active="0" />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import { getAnnouncement } from '@/api/announcement'
export default {
  components: { CustomTabbar },
  data(){
    return { id: '', detail: {} }
  },
  onLoad(query){ this.id = query && query.id; this.fetch() },
  methods: {
    async fetch(){ if(!this.id) return; const res = await getAnnouncement(this.id); this.detail = res.data || res || {} },
    fmt(val){ if(!val) return ''; const d = new Date(String(val).replace(/-/g,'/')); if(isNaN(d.getTime())) return String(val); const p=n=>n<10?('0'+n):n; return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}` },
    mapType(t){ const m={SYSTEM:'系统',ACTIVITY:'活动',SAFETY:'安全',UPDATE:'更新'}; return m[t]||t||'其它' }
  }
}
</script>

<style scoped>
.page { padding: 12rpx 12rpx 120rpx 12rpx; }
.header { background:#fff; border-radius: 12rpx; padding: 16rpx; box-shadow: 0 6rpx 20rpx rgba(0,0,0,.04); }
.title { font-weight: 700; font-size: 32rpx; color:#111827; }
.meta-row { margin-top: 8rpx; display:flex; align-items:center; gap: 12rpx; color:#6b7280; font-size: 22rpx; }
.tag { background:#ecfeff; color:#0ea5a5; padding: 2rpx 10rpx; border-radius: 999rpx; }
.content { margin-top: 12rpx; background:#fff; border-radius: 12rpx; padding: 20rpx; line-height: 1.8; color:#374151; box-shadow: 0 6rpx 20rpx rgba(0,0,0,.04); }
</style>


